<!DOCTYPE html>
<html>
<head>
    <title>骡窝窝问答</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/queryAndBlankComment.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/plugins/mdialog/mDialog.js"></script>
    <link rel="stylesheet" href="/css/dialog.css"/>
    <link rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script>
        $(function () {
            var questionId;//问题id
            var params = getParams();

            //根据id查询对应的问题回显
            $.get(baseUrl + '/questions/' + params.id, function (data) {
                console.log(data);
                questionId = data.id;
                $("#comment").renderValues(data, {
                    getHref: getHref
                });
            })

            //根据问题id查询回答
            $.get(baseUrl + '/questions/' + params.id + '/answers', function (data) {
                console.log(data);
                $("#commentReplyBtn").renderValues({list: data}, {
                    getHref: getHref
                })
            })


            //回答按钮弹出窗口方法
            function answer() {
                Dialog.init('<input  type="text" placeholder="请输入你回答的内容"  style="margin:8px 0;width:100%;padding:11px 8px;font-size:15px; border:1px solid #999;"/>', {
                    title: '输入点什么吧！',
                    button: {
                        回答: function () {
                            if (this.querySelector('input').value.length >= 2) {
                                var content = this.querySelector('input').value;//取当前输入的评论设置到表单中
                                var currentId = user.id;//当前评论的用户id

                                var answer = {
                                    questionId:questionId,
                                    content: content,
                                    "user.id": currentId,
                                }
                                $.post(baseUrl + '/answers', answer, function (data) {
                                    if (data.success) {
                                        //提示
                                        Dialog.init('回答成功', 1000);
                                        Dialog.close(this);
                                        setTimeout(function () {
                                            window.location.reload();
                                        }, 900);
                                    } else {
                                        $(document).dialog({
                                            type: 'alert',
                                            content: data.errorMsg,
                                            autoClose: 2000
                                        });
                                    }
                                })
                            } else {
                                Dialog.init('请发表2个字以上的回答', 1000);
                            }
                            ;
                        },
                        取消: function () {
                            Dialog.close(this);
                        }
                    }
                });
            }

            //点击评论按钮
            $("#commentBtn").click(function () {
                answer();
            });


        })
    </script>
</head>

<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);" style="position: absolute;left: 30px;">
                <span><i class="fa fa-chevron-left fa-2x" style="color: white;"></i></span>
            </a>
        </div>
        <div class="col">
            <span>骡窝窝问答</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<br>
<div class="row" id="comment">
    <div class="row">
        <div class="col-1"></div>
        <div class="col-2 comment-head">
            <a render-fun="getHref" render-key="user.id" data-url="/userProfiles.html?id=">
                <img class="rounded-circle"
                     render-src="user.headImgUrl">
            </a>
        </div>
        <div class="col">
            <a style="font-size: 10px;color: #61CAD0" render-html="user.nickName">喵喵</a>
            <span class="comment-date glyphicon glyphicon-time" render-html="createTime">2019-5-30</span>
            <div class="comment-content">
                <span class="glyphicon glyphicon-question-sign">问题:</span>
                <p render-html="content">这里是问题</p>
                <img render-src="imgUrl" width="100px"/>
            </div>
            <br>
            <span class="glyphicon glyphicon-map-marker" render-html="region.name">地球</span>
            <hr/>

            <div id="commentReplyBtn">
                <div render-loop="list">
                    <div class="row">
                        <div class="col-2 comment-head">
                            <a data-url="/userProfiles.html?id=" render-key="list.user.id"
                               render-fun="getHref">
                                <img class="rounded-circle" render-src="list.user.headImgUrl">
                            </a>
                        </div>
                        <div class="col">
                            <a style="font-size: 10px;color: #61CAD0"
                               render-html="list.user.nickName"></a>
                            <span class="comment-date" render-html="list.createTime"></span>
                            <div class="comment-content">
                                <p render-html="list.content"></p>
                            </div>
                            <hr/>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="operation">
    <button class="btn btn-success" id="commentBtn">我要回答</button>
</div>
</body>
</html>